<template>
    <div>

    <div class="homeDiv">
        <table style="width: 100%;height: 100%">
            <tr>

                <td style="width: 10%;vertical-align: top">
                      <div>
                          <ul class="uls">
                              <li >推荐</li>
                              <li>Python</li>
                              <li>Java</li>
                              <li>C#</li>
                              <li>C++</li>
                              <li>C语言</li>
                              <li>架构</li>
                              <li>前端</li>
                              <li>UI设计</li>
                              <li>VUE</li>
                              <li>ElementUi</li>
                              <li>VUE</li>
                              <li>数据库</li>
                              <li>Mysql</li>
                              <li>数据库中间件</li>
                              <li>安卓开发</li>
                              <li>IOS开发</li>
                              <li>测试</li>
                              <li>运维</li>
                              <li>安全</li>
                              <li>云计算/大数据</li>
                              <li>其他</li>
                          </ul>
                      </div>
                </td>
                <td style="width: 40%;vertical-align: top">
                    <div class="adDiv">
                        <table style="width: 100%;height: 100%">
                            <tr >
                                <td style="width: 70%;height: 100%">
                                    <div style="width: 100%;height:100%;">
                                        <el-carousel style="height: 100%">
                                           <template v-for="item in newsList">
                                               <el-carousel-item   @click="_clickCarousel(item)">
                                                   <div style="margin: 0 auto;position: relative;z-index: 1;">
                                                       <el-image :src="item.imgUrl"></el-image>
                                                       <p style="position: absolute;left: 30px;top: 230px;font-size: 20px;color: white">
                                                           {{item.name}}</p>
                                                   </div>
                                               </el-carousel-item>
                                           </template>
                                        </el-carousel>
                                    </div>
                                </td>
                                <td style="width: 30%;height: 100%">
                                    <template  v-for="item in recommendList">
                                        <div style="margin: 0 auto;position: relative;z-index: 1;">
                                            <el-image :src="item.imgUrl" @click="_clickCarousel(item)"></el-image>
                                            <p style="position: absolute;left: 0px;top: 0px;font-size: 10px;color: white">
                                                {{item.name}}</p>
                                        </div>
                                    </template>
                                </td>
                            </tr>
                        </table>
                    </div>
                    <div class="adDiv">
                        <template style="list-style: none;margin-top: 10px;margin-left: 1px;width: 100%;" v-for="item in blogList">

                           <ul  style=" list-style: none;text-align: left;margin-bottom: 0px;margin-top: 5px;margin-left: -20px">
                               <li style="text-align: left;margin-top: 10px"><a :href="'/#/blog_detail?id='+item.id" class="a">{{item.title}}</a></li>
                               <li style="display:inline-block;width: 100%">

                                   <table style="width: 100%">
                                       <tr>
                                           <td style="width: 5%">
                                               <el-avatar :size="30" :src="item.imgHead"></el-avatar>
                                           </td>
                                           <td style="width: 7%;white-space:nowrap;">
                                               {{item.authorName}}
                                           </td>

                                           <td  style="color: #8a8a8a;width: 50%"><span class="zj_name">{{item.name}}</span></td>

                                           <td style="text-align: right;margin-right: 0px;float: right">
                                               <ul style=" list-style: none;float: right;margin-bottom: 0px;margin-top: 0px">
                                                   <li class="lsBlog">
                                                       <div v-if="item.praise===0" @click="_praise(item.id)" style="color: red"><p class="el-icon-thumb"></p>点赞{{item.praiseQuantity}}</div>
                                                       <div v-else @click="_praiseNot(item.id)"><p class="el-icon-thumb"></p>点赞{{item.praiseQuantity}}</div>
                                                   </li>

                                                   <li class="lsBlog">
                                                       <div><p class="el-icon-s-comment"></p>浏览量{{item.browseQuantity}}</div>
                                                   </li>
                                               </ul>
                                           </td>
                                       </tr>


                                   </table>


                                   </li>
                           </ul>


                            <el-divider style="width: 100%;margin-top: 0px;margin-bottom: 0px"></el-divider>

                        </template>
                    </div>
                </td>
                <td style="width: 25%;vertical-align: top">

                    <div class="recDiv">



                        <el-card class="box-card" style="margin-bottom: 10px">
                            <span class="spanLine">博客专家</span>
                            <table style="width:100%;list-style: none;margin-top: 10px;" v-for="(item , index) in blogExpertList">
                                <tr style="float: left;width: 100%">

                                   <td style="width: 30%;">
                                       <el-avatar :size="50" src="http://localhost:9000/v1/sys_user/view_header?uri=60a75eeb1a72e825e1ec9f64"></el-avatar>
                                   </td>
                                    <td style="width: 50%;text-align: left">
                                         <ul class="zj_ul">
                                             <li class="zj_li_name"><span class="zj_txt">{{item.name}}</span></li>
                                             <li class="zj_li_ranks">{{item.ranks}}</li>
                                         </ul>
                                    </td>
                                    <td style="width: 20%;text-align: right">
                                        <ul class="zj_ul">
                                            <li style="margin-top: 5px"> <img style="width: 46px;height: 20px" src="../../static/expertbig.png"   alt title="博客技术专家"/></li>
                                            <li class="zj_li_ranks">12122篇</li>
                                        </ul>
                                    </td>
                                </tr>
                                <tr> <span class="zj_detail"> {{item.synopsis}}</span> </tr>
                                <el-divider style="margin-bottom: 0px;margin-top: 0px"></el-divider>
                            </table>
                        </el-card>




                        <el-card class="box-card" style="margin-bottom: 10px">
                            <span class="pai_title">博客周排行榜</span>

                            <table  style="width:100%;list-style: none;margin-top: 10px;" v-for="(item , index) in blogWeekList">
                                <tr style="float: left;width: 100%">

                                    <td style="width: 30%;">
                                        <el-avatar :size="50" src="http://localhost:9000/v1/sys_user/view_header?uri=60a75eeb1a72e825e1ec9f64"></el-avatar>
                                    </td>
                                    <td style="width: 50%;text-align: left">
                                        <ul class="zj_ul">
                                            <li class="zj_li_name"><span class="zj_txt">{{item.name}}</span></li>
                                            <li class="zj_li_ranks">获赞 12002</li>
                                        </ul>
                                    </td>
                                    <td style="width: 20%;text-align: right">
                                        <ul class="zj_ul">
                                            <li style="margin-top: 5px">
                                                <span class="index">848</span>
                                            </li>
                                            <li class="zj_li_ranks">
                                                <span class="index_txt">综合指标</span>
                                            </li>
                                        </ul>
                                    </td>
                                </tr>

                                <el-divider style="margin-bottom: 0px;margin-top: 0px"></el-divider>
                            </table>
                        </el-card>

                    </div>

                </td>



            </tr>
        </table>

    </div>
            <ToLogin ref="toLoginRef" @loginBack="loginBack"></ToLogin>
    </div>
</template>
<script>
    import {getReq, postReq} from '../utils/api'
    import ToLogin from '../views/ToLogin'
    export default {
        mounted(){
            this._page();
            this._cmsNews();
            this._recommendNews();
        },


        name: 'Blog',
        components:{
            ToLogin
        },
        data() {
            return {
                activeIndex: '1',
                activeIndex2: '1',
                input:'',
                url :'static/logo.png',
                newsList:[],
                recommendList:[],
                menuList:[


                    {
                        id:'1',
                        name:'配置',
                        path:'/config',
                    },
                    {
                        id:'2',
                        name:'组件',
                        path:'/components',
                    },
                    {
                        id:'3',
                        name:'指南',
                        path:'/index',
                    },
                ],
                blogList:[],

                blogExpertList:[
                    {
                        name:'Enbatis',
                        ranks:'高级产品专家',
                        synopsis:'阿里巴巴高级产品专家，拥有近 10 年的大',
                    },
                    {
                        name:'Mybatis-Plugs',
                        ranks:'软件研发工程师',
                        synopsis:'三年Android开发经验，掌握Android',
                    },
                    {
                        name:'云东升',
                        ranks:'技术主管',
                        synopsis:'小极客，热爱编程，热爱开源，2016年',
                    }
                ],

                blogWeekList:[
                    {
                        name:'ADS',
                        praiseQuantity:'1129',
                    },
                    {
                        name:'我有发的',
                        praiseQuantity:'1025',
                    },
                    {
                        name:'天下霸唱',
                        praiseQuantity:'1011',
                    }
                ],

            };
        },
        methods: {
            handleSelect(key, keyPath) {
                this.$router.push({path:key,query:{}});

            },
            _clickCarousel(item){
                window.open(item.link)
            },

            _praise(id){
                postReq('/api/blog_praise/praise?blogId='+id).then(res=>{
                    let data= res.data.data;
                    if (res.data==='未登录'){
                        this.$refs.toLoginRef._open()
                    }else{
                        if (data){
                            this._page()
                        }
                    }

                    console.log('----------------data',data)
                }).catch(err=>{
                    console.log(err)
                });
            },
            _praiseNot(id){
                postReq('/api/blog_praise/praise_not?blogId='+id).then(res=>{
                    let data= res.data.data;
                    if (res.data==='未登录'){
                        this.$refs.toLoginRef._open()
                    }else{
                        if (data){
                            this._page()
                        }
                    }

                    console.log('----------------data',data)
                }).catch(err=>{
                    console.log(err)
                });
            },

            loginBack(){
                this.$emit('viewIn')
            },

            _page(){
                getReq('/api/blog/list',{}).then(res=>{
                    console.log('---res---',res)
                    console.log('---res.data---',res.data)
                    this.blogList=res.data.data;
                })
            },
            _cmsNews(){
                getReq('/api/cms_news/list',{}).then(res=>{
                    this.newsList=res.data.data;
                })
            },
            _recommendNews(){
                getReq('/api/cms_recommend/list',{}).then(res=>{
                    this.recommendList=res.data.data;
                })
            },

        }
    }
</script>
<style>
    .homeDiv{
        background-color: #f3f5f7;
    }
    .uls{
        padding: 0px 0px 0px 160px;
        position: fixed;

        margin-top: 10px;
        top: 40px;

        z-index: 500;
        float: right;
        list-style: none;

    }
    .uls li{
        background-color: white;
        height: 30px;
        text-align: center;
        line-height: 30px;
    }
    .uls li a{
        text-decoration: none;
        color: black;
    }
    .uls li:hover, a:active{
        background-color:#BE3948;
        /*color:white;*/
    }


    .adDiv{
        margin-top: 8px;
        margin-left: 80px;
        background-color: white;
    }
    .recDiv{
        margin-top: 8px;
        margin-left: 8px;
        background-color: white;
        width: 60%;
    }
    a:hover{color:#F00}
    .a{

        font-size: 20px;
        font-weight: bold;
        text-decoration:none;
        color: #222226;
    }
    .lsBlog{
        display:inline-block;
        margin-right: 20px;
    }

    .spanLine{
        margin-bottom: 10px;
        display: block;
        float: left;
        font-size: 18px;
        color: #20232c;
        font-weight: bolder;
    }

    .zj_txt{
        font-size: 14px;
        color: #4f4f4f;
        margin-bottom: 5px;
        font-weight: bold;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        width: 150px;
    }


    .zj_ul{
        margin-top: 0px;
        list-style: none;
        padding: 0px;
        padding-inline-start: 0px;
    }
    .zj_li_name{
        background-color: white;
        height: 30px;
        text-align: left;
        line-height: 30px;
    }


    .zj_li_ranks{
        font-size: 12px;
        color: #707070;
        display: inline-block;
        max-width: 150px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .zj_detail{
        overflow: hidden;
        text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
        white-space:nowrap;
        width:240px;
        height:24px;
        display:block;
    }
    .zj_name{
        overflow: hidden;
        text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
        white-space:nowrap;
        width:420px;
        height:24px;
        display:block;
    }

    .pai_title{
        display: block;
        float: left;
        font-size: 18px;
        color: #20232c;
        font-weight: bolder;
    }

    .index{
        font-size: 16px;
        font-weight: 600;
        color: #fc5531;
        line-height: 24px;
        position: relative;
        padding-right: 3px;
    }

    .index_txt{
        font-size: 12px;
        color: #999;
        line-height: 17px;
        text-align: right;
    }


</style>